<template>
  <div class="navbar">
    <van-nav-bar v-model="active" :title="title" @click="toHome">
      <template #left>
        <van-icon name="wap-home-o" size="26" color="#7F7F7F" @click="toHome" />
      </template>
      <template #right>
        <van-icon name="search" size="26" color="#7F7F7F" @click="toSearch" />
        <van-icon name="shopping-cart-o" color="#7F7F7F" size="26"  @click="toCart" :badge="badge" />
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
export default {
  name: "NavBar",
  data() {
    return {
      active: 0,
      title: "网易严选",
      badge: 9,
    };
  },
   methods: {
    //点击跳转首页
    toHome() {
      this.$router.push({
        path: "/home",
      });
    },
    //点击跳转到搜索
    toSearch() {
      this.$router.push({
        path: "/search",
      });
    },
    //点击跳转到购物车
    toCart() {
      this.$router.push({
        path: "/cart",
      });
    },
  },
};
</script>

<style lang='less' scoped>
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  .van-nav-bar__content {
    .van-nav-bar__right {
      .van-icon-search:before {
        padding-right: 20px;
      }
    }
  }
}
</style>